<template>
  <main class="homehot">
    <div v-for="(hotlist,index) in homehotlistdata" :key="index" class="hotdiv">
      <img class="hotimg" :src="hotlist.img" alt="我是图" />
      <div class="hotinfo">
        <p class="hotp1">{{ hotlist.title }}</p>
        <p class="hotp2">{{ hotlist.name }}</p>
      </div>
    </div>
  </main>
</template>

<script>
// import axios from "axios";

export default {
  name: "HomeHotList",
  data: function () {
    return {
      hotlists: [],
    };
  },
  created() {
    // axios({
    //   url: "/HomeHotList",
    // })
    //   .then((res) => {
    //     this.hotlists = res.data;
    //   })
    //   .catch((err) => console.log("err404", err));
    this.$store.dispatch("LINK_HOMEHOTLIST_DATA","/home/homehotlist")
  },
   computed:{
      homehotlistdata(){
        return this.$store.state.HomeHotListM.homehotlist
      }
      
      // console.log(this.banners)
    }
};
</script>

<style scoped>
.hotdiv {
  padding: 0 0.15rem;
  /* background-color: rgb(253, 193, 193); */
  display: flex;
  margin-bottom: 0.2rem;
  justify-content: space-between;
}
.hotinfo {
  width: 2rem;
  height: 0.94rem;
}
.hotdiv .hotimg {
  width: 1.66rem;
  height: 0.94rem;
}
.hotp1 {
  font-size: 0.16rem;
}

.hotp2 {
  padding-top: 0.1rem;
  font-size: 0.12rem;
  color: grey;
}
.homehot{
  padding-bottom: .6rem;
}
</style>
